<template>
  <view class="flex-col">
    <view class="page-wrap" :class="'bottom115'">
      <uni-forms ref="form" :value="form" labelWidth="auto" :labelPosition="'top'">

        <uni-forms-item :required="true" name="vinNo" label="车架号:"
                        :rules="mRule('请选择车架号', 'bind')">
          <zxz-uni-data-select
		    filterable
            @change="setData"
            v-model="form.carId"
            dataKey="vinNo"
            dataValue="carId"
            :localdata="vinList"></zxz-uni-data-select>
        </uni-forms-item>

        <uni-forms-item :required="true" name="carNo" label="车牌号:"
                        :rules="mRule('请选择车牌号', 'bind')">
          <zxz-uni-data-select
			filterable
            @change="setData"
            v-model="form.carId"
            dataKey="carNo"
            dataValue="carId"
            :localdata="carNoList"></zxz-uni-data-select>
        </uni-forms-item>

        <uni-forms-item :required="true" name="workOrderType" label="工单类型:" :rules="mRule('请选择工单类型', 'bind')">
          <zxz-uni-data-select
            v-model="form.workOrderType"
            dataKey="name"
            dataValue="code"
            :localdata="workList"></zxz-uni-data-select>
        </uni-forms-item>

        <uni-forms-item :required="true" name="carmodel" label="品牌/车型/车款:" :rules="mRule('请选择品牌/车型/车款', 'bind')">
          <uni-easyinput disabled type="textarea" v-model="form.carmodel" placeholder="系统根据车牌号/车架号自动获取"/>
        </uni-forms-item>

        <uni-forms-item :required="true" name="propertyRightName" label="车辆产权:" :rules="mRule('请选择车辆产权', 'bind')">
          <uni-easyinput disabled type="text" v-model="form.propertyRightName" placeholder="系统根据车牌号/车架号自动获取"/>
        </uni-forms-item>

        <uni-forms-item :required="true" name="ascription" label="车辆归属:" :rules="mRule('请选择车辆归属', 'bind')">
          <uni-easyinput disabled type="text" v-model="form.ascription" placeholder="系统根据车牌号/车架号自动获取"/>
        </uni-forms-item>

        <uni-forms-item :required="true" name="operationsName" label="车辆运营城市:" :rules="mRule('请选择车辆运营城市', 'bind')">
          <uni-easyinput disabled type="text" v-model="form.operationsName" placeholder="系统根据车牌号/车架号自动获取"/>
        </uni-forms-item>

        <uni-forms-item :required="true" name="region" label="车辆大区:" :rules="mRule('请选择车辆大区', 'bind')">
          <uni-easyinput disabled type="text" v-model="form.region" placeholder="系统根据车牌号/车架号自动获取"/>
        </uni-forms-item>

        <uni-forms-item name="contractReportNumber" label="合同禀议编号:" >
          <uni-easyinput disabled type="text" v-model="form.contractReportNumber" placeholder="系统根据车牌号/车架号自动获取"/>
        </uni-forms-item>

        <uni-forms-item name="contractStartTime" label="合同开始日期:" >
          <uni-easyinput disabled type="text" v-model="form.contractStartTime" placeholder="系统根据车牌号/车架号自动获取"/>
        </uni-forms-item>

        <uni-forms-item name="contractEndTime" label="合同结束日期:" >
          <uni-easyinput disabled type="text" v-model="form.contractEndTime" placeholder="系统根据车牌号/车架号自动获取"/>
        </uni-forms-item>

        <uni-forms-item :required="true" name="customerName" label="客户名称:" :rules="mRule('请选择客户名称', 'bind')">
          <uni-easyinput disabled type="text" v-model="form.customerName" placeholder="系统根据车牌号/车架号自动获取"/>
        </uni-forms-item>

        <uni-forms-item name="procurementReportNumber" label="采购禀议编号:" >
          <uni-easyinput disabled type="text" v-model="form.procurementReportNumber" placeholder="系统根据车牌号/车架号自动获取"/>
        </uni-forms-item>

        <uni-forms-item required name="contractType" label="产品类型:" :rules="mRule('请选择产品类型', 'bind')">
          <zxz-uni-data-select
            placeholder="系统根据车牌号/车架号自动获取"
            disabled
            v-model="form.contractType"
            dataKey="label"
            dataValue="value"
            :localdata="dict.type.quota_rent_type"></zxz-uni-data-select>
        </uni-forms-item>

        <uni-forms-item required name="businessType" label="车辆状态:" :rules="mRule('请选择车辆状态', 'bind')">
          <zxz-uni-data-select
            placeholder="系统根据车牌号/车架号自动获取"
            disabled
            v-model="form.businessType"
            dataKey="label"
            dataValue="value"
            :localdata="dict.type.car_business_type"></zxz-uni-data-select>
        </uni-forms-item>

      </uni-forms>
    </view>

    <view class="button-container" >
      <button class="btn-item" @click="submit">提 交</button>
    </view>

  </view>
</template>

<script>
import { carWorkOrder, queryList } from "@/api/gps/gpsList";
import {deepClone} from "@/uni_modules/uv-ui-tools/libs/function";

export default {
  dicts: ["quota_rent_type", "car_business_type"],
  data() {
    return {
      form: {},
      vinList: [],
      carNoList: [],
      workList: [
        {
          code: 12,
          name: "GPS安装",
        },
        // {
        //   code:13,
        //   name:'GPS续费'
        // },
        {
          code: 14,
          name: "GPS维修",
        },
        {
          code: 15,
          name: "GPS拆除",
        },
        // ,{
        //     code:17,
        //     name:'GPS排查'
        // }
      ],
    }
  },
  onLoad(op) {
    this.getData();
  },
  methods: {

    setData(obj){
      this.form = {...this.form, ...obj};
      if(obj){
        this.form.carmodel = obj.brandName + "/" + obj.seriesName + "/" + obj.modelName;
      }else {
        this.form.carmodel = null;
      }
      this.$forceUpdate();
    },

    getData() {
		uni.showLoading()
      queryList({
        pageNum: 1,
        pageSize: 100000,
      }).then((res) => {
        if (res.code == "200") {
          const { data } = res;
          this.vinList = data;
          this.carNoList = data.filter((item) => {
            return item.carNo !== undefined && item.carNo !== null && item.carNo != '';
          });
        }
      }).finally(f=>{
		  uni.hideLoading()
	  });
    },

    submit() {
      this.$refs.form.validate().then(res => {
        uni.showLoading();
        carWorkOrder(this.form).then(response => {
          uni.hideLoading();
          uni.$emit("refreshGps", true);
          this.$modal.msgSuccess("提交成功");
          setTimeout(() => {
            this.$tab.navigateBack();
          }, 1000)
        }).catch(e => {
			setTimeout(() => {
			  uni.hideLoading();
			}, 1000)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
